import {
  AlipayCircleOutlined,
  LockOutlined,
  MailOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import {Alert, Space, message, Tabs} from 'antd';
import React, {useState} from 'react';
import ProForm, {ProFormCaptcha, ProFormCheckbox, ProFormText} from '@ant-design/pro-form';
import {useIntl, connect, FormattedMessage, history} from 'umi';
import {login} from '@/services/login';
import bg from '@/assets/img/bg.png'
import styles from './index.less';
import {getPageQuery} from "@/utils/utils";
import {queryLoginAccountInfo} from "@/services/system";

const LoginMessage = ({content}) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login = (props) => {
  const {userLogin = {}, submitting} = props;
  const {status, type: loginType} = userLogin;
  const [type, setType] = useState('account');
  const [loginError, setLoginError] = useState(false)
  const intl = useIntl();

  const handleLogin = async (param)=>{
    const hide = message.loading('正在登录');

    try {
      await login({...param}).then(res=>{
        if(res && res.status === '0') {
          const urlParams = new URL(window.location.href);
          const params = getPageQuery();
          message.success('🎉 🎉 🎉  登录成功！');
          sessionStorage.setItem('user', JSON.stringify(res.result))
          let { redirect } = params;

          // if (redirect) {
          //   const redirectUrlParams = new URL(redirect);
          //
          //   if (redirectUrlParams.origin === urlParams.origin) {
          //     redirect = redirect.substr(urlParams.origin.length);
          //
          //     if (redirect.match(/^\/.*#/)) {
          //       redirect = redirect.substr(redirect.indexOf('#') + 1);
          //     }
          //   } else {
          //     window.location.href = '/';
          //     return;
          //   }
          // }
          sessionStorage.setItem('token', res.result.token);
          // history.replace(redirect || '/home');
          history.replace('/home');
        }else {
          //console.log((res)
          setLoginError(true)
        }

      })
      hide();
      return true;
    } catch (error) {
      hide();
      message.error('登录失败请重试！');
      return false;
    }
  }

  const handleSubmit = (values) => {
    handleLogin(values);
  };

  return (
    <>
      <img className={styles.bg} src={bg}/>
      <div className={styles.main}>
        <h2>账号登录</h2>
        <ProForm
          initialValues={{
            autoLogin: true,
          }}
          submitter={{
            render: (_, dom) => dom.pop(),
            submitButtonProps: {
              loading: submitting,
              size: 'large',
              style: {
                width: '100%',
              },
            },
          }}
          onFinish={(values) => {
            handleSubmit(values);
            return Promise.resolve();
          }}
        >
          {loginError ? (
            <LoginMessage
              content={intl.formatMessage({
                id: 'pages.login.accountLogin.errorMessage',
                defaultMessage: '账户或密码错误',
              })}
            />
          ): <></>}
          <>
            <ProFormText
              name="account"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon}/>,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.username.placeholder',
                defaultMessage: '用户名: ',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.username.required"
                      defaultMessage="请输入用户名!"
                    />
                  ),
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon}/>,
              }}
              placeholder={intl.formatMessage({
                id: 'pages.login.password.placeholder',
                defaultMessage: '密码:',
              })}
              rules={[
                {
                  required: true,
                  message: (
                    <FormattedMessage
                      id="pages.login.password.required"
                      defaultMessage="请输入密码！"
                    />
                  ),
                },
              ]}
            />
          </>

          <div
            style={{
              marginBottom: 24,
            }}
          >
            {/*<ProFormCheckbox noStyle name="autoLogin">*/}
            {/*  <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录"/>*/}
            {/*</ProFormCheckbox>*/}
            <a
              style={{
                float: 'right',
              }}
            >
              <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码"/>
            </a>
          </div>
        </ProForm>
        {/*<Space className={styles.other}>*/}
        {/*  <FormattedMessage id="pages.login.loginWith" defaultMessage="其他登录方式" />*/}
        {/*  <AlipayCircleOutlined className={styles.icon} />*/}
        {/*  <TaobaoCircleOutlined className={styles.icon} />*/}
        {/*  <WeiboCircleOutlined className={styles.icon} />*/}
        {/*</Space>*/}
      </div>
    </>
  );
};

export default connect(({login, loading}) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
